<template>
<div class="centerList">
  <div class="search">
    <el-row>
      <el-col :span="18" class="searchCol">
        <el-input v-model="search"  size="large" placeholder="搜索" type="text">
          <template #prefix>
            <el-icon class="el-input__icon" :size="20"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="2" class="addGroupChat">
        <el-button ><el-icon><Plus/></el-icon></el-button>
      </el-col>
    </el-row>
  </div>
  <ul class="chatList"  >
    <!--
      <li v-for="n in 100" :key="n" :class="{'selected':n===selectedIndex}" @click="selectContact(n)">
        <el-badge :value="n+2" class="item">
          <el-avatar shape="square" :size="50" src="/src/css/imitateWechat/img/xiaoxin.jpg" />
        </el-badge>
        <div class="overViewInfo">
          <div class="nickName">小新{{n}}</div>
          <div class="latestChat">好好玩</div>
        </div>
      </li>
    -->
    <template v-if="onlineUsers.length>0">
      <li v-for="(item,index) in onlineUsers" :key="index" :class="{'selected':index===selectedIndex}" @click="selectContact(item,index)">
        <el-badge :value="index+2" class="item">
          <el-avatar shape="square" :size="50" class="contactorHeader" />
        </el-badge>
        <div class="overViewInfo">
          <div class="nickName">{{item}}</div>
          <div class="latestChat">好好玩</div>
        </div>
      </li>

    </template>

    <!--
    <li>
      <el-badge :value="12" class="item">
        <el-avatar shape="square" :size="50" src="/src/css/imitateWechat/img/xiaoxin.jpg" />
      </el-badge>
      <div class="overViewInfo">
        <div class="nickName">改改</div>
        <div class="latestChat">好好玩</div>
      </div>
    </li>
    -->
  </ul>
</div>
</template>

<script>
import emitter from "../../sysConfig/bus.js"
export default {
  name: "CenterList",
  props:["onlineUsers"],
  data(){
    return{
      search:"",
      selectedIndex:-1
    }
  },
  mounted() {
    setTimeout(()=>{
      if(this.onlineUsers.length>0){
      this.selectContact(this.onlineUsers[0],0)
    }},100);


  },
  methods:{
    selectContact:function (item,idx){
      this.selectedIndex=idx;
      emitter.emit("destUserId",item);

    }
  },
  watch:{
    onlineUsers:function (newVal,oldVal){
      // setTimeout(()=>{
      //   },10);
      if(newVal.length>0){
        this.selectContact(newVal[0],0)
      }
    }
  }
}
</script>

<style scoped>

</style>